<!--
 * @Description: 
 * @Date: 2023-03-08 10:15:36
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 15:09:35
-->
<template>
	<div class="list-item" @click="playVide()">
		<div class="video-box">
			<el-image class="in" :src="video.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
			<div class="viewer" v-if="video.viewer !== null">
				<img src="../../assets/images/antFill-eye.svg" alt="" /><span>{{ video.viewer }}</span>
			</div>
			<IEpVideoPlay color="#fff" />
		</div>
		<span class="title">{{ video.title }}</span>

		<PreviewVideo ref="PVVideoRef" :video="video" />
	</div>
</template>
<script setup lang="ts">
import { PVideo } from "@/components/interface";
import PreviewVideo from "@/components/PreviewVideo/index.vue";

defineProps<{ video: PVideo }>();

const PVVideoRef = ref<InstanceType<typeof PreviewVideo>>();
const playVide = () => {
	PVVideoRef.value.play();
};
</script>
<style lang="scss" scoped>
.list-item {
	display: flex;
	flex-direction: column;
	width: 300px;
	height: 291px;
	margin-top: 40px;
	margin-right: 20px;
	font-size: 20px;
	border: 1px solid rgb(222 222 222 / 100%);
	&:nth-child(4n) {
		margin-right: 0;
	}
	.el-image {
		height: 222px;
		vertical-align: middle;
	}
	.title {
		flex: 1;
		padding: 20px;
	}
}

@media all and (max-width: 750px) {
	.list-item {
		width: 47.5%;
		margin-right: 5%;
		&:nth-child(2n) {
			margin-right: 0;
		}
	}
}
</style>
